<!--
 * @Author: chenhuanhuan 2925102113@qq.com
 * @Date: 2024-12-20 10:28:18
 * @LastEditors: chenhuanhuan 2925102113@qq.com
 * @LastEditTime: 2025-02-14 11:43:08
 * @FilePath: \hbzc-groupmeal-center-web\src\Public-UIlibrary\pb-tree-select\index.vue
-->
<template>
  <el-tree-select v-model="internalValue" :placeholder="placeholder" :data="optionsData" :props="defaultProps"
    check-strictly="check" :style="{ width: `${width}px` }" :render-after-expand="false" @node-click="handleNodeClick"
    :disabled="disabled" :filter-method="filterMethod" :filterable="filterable" :defaultExpandAll="true" clearable />
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits, computed } from "vue";
/**
 * @param width    宽度
 * @param modelValue    值
 * @param options    list列表
 * @param keys      指定返回的数据
 * @param label      指定显示的节点名称
 * @param placeholder  提示
 * @param disabled   是否禁用
 */
const props = defineProps({
  width: {
    type: Number,
    default: 240,
  },
  modelValue: {
    type: String,
    default: "",
  },
  defaultProps: {
    type: Object,
  },
  check: {
    type: Boolean,
    default: false,
  },
  placeholder: {
    type: String,
    default: "请选择",
  },
  Data: {
    type: Array,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  filterable: {
    type: Boolean,
    default: true,
  },
});

const emits = defineEmits(["update:modelValue", "nodeClick"]);
let internalValue = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emits("update:modelValue", val);
  },
});
let showOptions = computed(() => {
  let list = props.options.map((it) => {
    it.value = it[props.keys];
    it.label = it[props.label];
    return it;
  });
  return list;
});

/**
 * 点击节点触发，返回当前节点和父节点
 *
 * useThrottleFn 添加防抖
 */
const handleNodeClick = useDebounceFn((curNode, b) => {
  // let {
  //   parent: { data: parentNode },
  // } = b;
  emits("nodeClick", curNode);
}, 300);

const optionsData = ref(props.Data);

// 筛选方法
const filterMethod = (value) => {
  optionsData.value = [...props.Data].filter((item) =>
    item[props.defaultProps.label].includes(value)
  );
};
</script>

<style lang="scss" scoped>
::v-deep .el-select__wrapper {
  min-height: 36px !important;
  padding: 1px 16px !important;
}
</style>
